<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >新增</el-button
        >
        <el-button
          v-rights="'export'"
          icon="el-icon-document-copy"
          type="primary"
          @click="exportData()"
          >导出</el-button
        >
        <el-button
          v-rights="'delete'"
          icon="el-icon-delete"
          type="danger"
          @click="deleteAirBagCleaningRecord()"
          >删除</el-button
        >
      </div>
      <el-table
        :data="list"
        element-loading-text="Loading"
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
        height="calc(100% - 190px)"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55">
          <el-table-column type="selection"></el-table-column>
        </el-table-column>
        <el-table-column align="center" width="50">
          <template #header>
            <div class="filter-icon" title="筛选">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>
        <el-table-column label="记录编号">
          <el-table-column prop="num">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.num"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="气袋编号">
          <el-table-column prop="airBagNum">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.airBagNum"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.airBagNum"
                placement="top"
              >
                <div class="ellipsis-text">{{ scope.row.airBagNum }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="清洗日期">
          <el-table-column prop="cleaningDate">
            <template #header>
              <el-date-picker
                v-model="queryForm.cleaningDateList"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row.cleaningDate) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="记录人">
          <el-table-column prop="recordPerson">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.recordPerson"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作时间">
          <el-table-column prop="updateTime">
            <template #header>
              <el-date-picker
                v-model="queryForm.updateTimeList"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作">
          <el-table-column width="140">
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="onQuery">搜索</el-link>
                <el-link @click="cancelForm">重置</el-link>
              </div>
            </template>
            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link
                  v-rights="'update'"
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row)"
                  >编辑</el-link
                >
                <el-link
                  v-rights="'preview'"
                  size="mini"
                  type="primary"
                  @click="preview(scope.row)"
                  >预览</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <AirBagCleaningRecordEdit
      v-if="dialogFormVisible"
      :id.sync="id"
      ref="AirBagCleaningRecordEdit"
      :dialog-form-visible.sync="dialogFormVisible"
      @close="onQuery"
    />
    <BasePreviewFile
      v-if="previewFileShow"
      :preview-file-show.sync="previewFileShow"
      :preview-file="filepreview"
    />
  </div>
</template>

<script>
import {
  deleteRecord,
  getList,
} from "../../../api/Material/MaterialAirBagCleaningRecord.js";
import AirBagCleaningRecordEdit from "./MaterialAirBagCleaningRecordEdit.vue";
import { formatTime } from "../../../utils/time";
import { WordToImage, GetStaticFileInfo } from "@/api/Base";

export default {
  name: "MaterialAirBagCleaningRecordList",
  components: { AirBagCleaningRecordEdit },
  data() {
    return {
      loading: true,
      showFilterRow: false,
      previewFileShow: false,
      dialogFormVisible: false,
      formatTime,
      id: "",
      list: [],
      tableDatas: [],
      filepreview: {
        storageFileName: "",
        url: "",
      },
      queryForm: {
        num: "",
        airBagNum: "",
        recordPerson: "",
        updateTimeList: [],
        cleaningDateList: [],
        updateStartTime: null,
        updateEndTime: null,
        cleaningStartTime: null,
        cleaningEndTime: null,
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 导出
    exportData() {
      this.tableDatas.forEach((element) => {
        if (element.filePath) {
          GetStaticFileInfo(
            element.filePath,
            element.num + "仪器设备维保记录.docx"
          );
        }
      });
    },
    preview(row) {
      this.loading = true;
      this.toImage(row.filePath);
    },
    toImage(data) {
      this.filepreview = {};
      this.filepreview.storageFileName = "";
      this.filepreview.url = "";
      this.filepreview.fileName = "气袋清洗记录.docx"; // 文件名称（包括后缀名）storageFileName
      this.filepreview.storageFileName = "气袋清洗记录.docx";
      this.filepreview.urlList = null;
      this.filepreview.type = "";

      WordToImage({ filePath: data })
        .then((res1) => {
          this.filepreview.urlList = res1.data;
          this.filepreview.type = "img";
          this.loading = false;
          this.previewFileShow = true;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    deleteAirBagCleaningRecord() {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ idList: this.tableDatas.map((x) => x.id) })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    // 清空筛选条件
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      this.pagination.pageIndex = 1;
      this.getList("filter");
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      this.id = "";
      this.dialogFormVisible = true;
    },
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    handleEdit(rowData) {
      this.id = rowData.id;
      this.dialogFormVisible = true;
    },
    onQuery() {
      if (
        this.queryForm.updateTimeList !== null &&
        this.queryForm.updateTimeList.length !== 0
      ) {
        this.queryForm.updateStartTime =
          this.queryForm.updateTimeList[0] + " 00:00:00";
        this.queryForm.updateEndTime =
          this.queryForm.updateTimeList[1] + " 23:59:59";
      }
      if (
        this.queryForm.cleaningDateList !== null &&
        this.queryForm.cleaningDateList.length !== 0
      ) {
        this.queryForm.cleaningStartTime =
          this.queryForm.cleaningDateList[0] + " 00:00:00";
        this.queryForm.cleaningEndTime =
          this.queryForm.cleaningDateList[1] + " 23:59:59";
      }

      this.pagination.pageIndex = 1;

      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.ellipsis-text {
  width: 150px; /* 设置宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>
